<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据增强 - 数据处理平台</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#6366f1'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<style>
:where([class^="ri-"])::before {
content: "\f3c2";
}
.custom-checkbox {
appearance: none;
width: 1rem;
height: 1rem;
border: 2px solid #d1d5db;
border-radius: 0.25rem;
background-color: white;
cursor: pointer;
position: relative;
}
.custom-checkbox:checked {
background-color: #3b82f6;
border-color: #3b82f6;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
left: 3px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-switch {
width: 44px;
height: 24px;
background-color: #d1d5db;
border-radius: 12px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
}
.custom-switch.active {
background-color: #3b82f6;
}
.custom-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
}
.custom-switch.active::after {
transform: translateX(20px);
}
.custom-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: #e5e7eb;
outline: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
}
.custom-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
border: none;
}
.custom-radio {
appearance: none;
width: 1rem;
height: 1rem;
border: 2px solid #d1d5db;
border-radius: 50%;
background-color: white;
cursor: pointer;
position: relative;
}
.custom-radio:checked {
border-color: #3b82f6;
}
.custom-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #3b82f6;
}
.upload-area {
border: 2px dashed #d1d5db;
transition: all 0.3s ease;
}
.upload-area.dragover {
border-color: #3b82f6;
background-color: #eff6ff;
}
.enhancement-card {
transition: all 0.2s ease;
}
.enhancement-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.enhancement-card.active {
border-color: #3b82f6;
background-color: #eff6ff;
}
.enhancement-option {
transition: all 0.2s ease;
cursor: pointer;
}
.enhancement-option:hover {
background-color: #f9fafb;
}
.enhancement-option.selected {
background-color: #eff6ff;
border-color: #3b82f6;
}
.preview-container {
position: relative;
overflow: hidden;
}
.preview-before, .preview-after {
transition: all 0.3s ease;
}
.tab-button {
transition: all 0.2s ease;
}
.tab-button.active {
background-color: #3b82f6;
color: white;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<aside class="w-64 bg-white shadow-sm border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<div class="flex items-center">
<span class="text-xl font-bold text-gray-900 font-['Pacifico']">logo</span>
</div>
</div>
<nav class="flex-1 px-2 py-4">
<ul class="space-y-1">
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-dashboard-line"></i>
</div>
<span>模型管理</span>
<div class="w-5 h-5 flex items-center justify-center ml-auto">
<i class="ri-arrow-right-s-line"></i>
</div>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-git-branch-line"></i>
</div>
<span>模型生命周期</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-bar-chart-line"></i>
</div>
<span>模型性能评估</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-exchange-line"></i>
</div>
<span>模型转换适配</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-cpu-line"></i>
</div>
<span>推理服务</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-api-line"></i>
</div>
<span>API 接口</span>
</button>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm bg-primary text-white rounded-lg">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-database-2-line"></i>
</div>
<span>数据处理</span>
<div class="w-5 h-5 flex items-center justify-center ml-auto">
<i class="ri-arrow-down-s-line"></i>
</div>
</button>
<ul class="ml-6 mt-2 space-y-1">
<li>
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/9378c72c-61c7-4d59-b808-6bd09795c82d" data-readdy="true" class="flex items-center w-full px-3 py-2 text-sm text-blue-200 hover:text-white hover:bg-blue-600 rounded-lg">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-filter-3-line"></i>
</div>
<span>数据预处理</span>
</a>
</li>
<li>
<button class="flex items-center w-full px-3 py-2 text-sm text-white bg-blue-600 rounded-lg">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-magic-line"></i>
</div>
<span>数据增强</span>
</button>
</li>
<li>
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/796ba360-2c62-4fda-b349-cf640aac9aa4" data-readdy="true" class="flex items-center w-full px-3 py-2 text-sm text-blue-200 hover:text-white hover:bg-blue-600 rounded-lg">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-settings-3-line"></i>
</div>
<span>结果后处理</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
<div class="flex-1 flex flex-col">
<header class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/89aef61f-e02e-4f74-9680-4a0d35936fdf" data-readdy="true" class="flex items-center text-gray-500 hover:text-gray-700">
<div class="w-5 h-5 flex items-center justify-center mr-2">
<i class="ri-arrow-left-line"></i>
</div>
<span class="text-sm">返回</span>
</a>
<nav class="text-sm text-gray-500">
<span>数据处理平台</span>
<span class="mx-2">/</span>
<span>数据处理</span>
<span class="mx-2">/</span>
<span class="text-gray-900">数据增强</span>
</nav>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>生产环境</option>
<option>测试环境</option>
<option>开发环境</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
<div class="relative">
<input type="text" placeholder="搜索任务..." class="bg-gray-50 border border-gray-300 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent w-64">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="ri-search-line text-gray-400"></i>
</div>
</div>
<button class="relative p-2 text-gray-400 hover:text-gray-600">
<div class="w-6 h-6 flex items-center justify-center">
<i class="ri-notification-3-line"></i>
</div>
<span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span>
</button>
<div class="flex items-center space-x-3">
<img src="https://readdy.ai/api/search-image?query=professional%20business%20portrait%20of%20a%20young%20asian%20software%20engineer%20in%20modern%20office%20setting%2C%20clean%20background%2C%20professional%20lighting%2C%20high%20quality%20headshot&width=40&height=40&seq=user_avatar&orientation=squarish" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
<div class="text-sm">
<div class="text-gray-900 font-medium">张开发</div>
</div>
</div>
</div>
</div>
</header>
<main class="flex-1 overflow-auto">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold text-gray-900">数据增强</h1>
<p class="text-gray-600 mt-1">通过多种增强技术扩充训练数据，提升模型泛化能力和性能</p>
</div>
<div class="flex items-center space-x-3">
<button id="saveConfigBtn" class="bg-white border border-gray-300 text-gray-700 px-6 py-2 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button flex items-center">
<i class="ri-save-line mr-2"></i>
保存配置
</button>
<button id="loadConfigBtn" class="bg-white border border-gray-300 text-gray-700 px-6 py-2 rounded-button text-sm font-medium hover:bg-gray-50 whitespace-nowrap !rounded-button flex items-center">
<i class="ri-folder-open-line mr-2"></i>
加载配置
</button>
<button id="startEnhancementBtn" class="bg-primary text-white px-6 py-2 rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button flex items-center">
<i class="ri-play-line mr-2"></i>
开始增强
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-lg">
<i class="ri-image-line text-blue-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">原始样本</p>
<p class="text-2xl font-bold text-gray-900">2,847</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-green-100 rounded-lg">
<i class="ri-magic-line text-green-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">增强样本</p>
<p class="text-2xl font-bold text-gray-900">12,356</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-lg">
<i class="ri-expand-left-right-line text-purple-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">扩充倍数</p>
<p class="text-2xl font-bold text-gray-900">4.3x</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-lg">
<i class="ri-time-line text-orange-600 text-xl"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">处理时间</p>
<p class="text-2xl font-bold text-gray-900">3.2分钟</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-6">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">数据上传</h2>
</div>
<div class="p-6">
<div id="uploadArea" class="upload-area rounded-lg p-8 text-center cursor-pointer">
<div class="w-16 h-16 flex items-center justify-center bg-gray-100 rounded-lg mx-auto mb-4">
<i class="ri-upload-cloud-2-line text-gray-400 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">上传需要增强的数据</h3>
<p class="text-sm text-gray-500 mb-4">支持图像、文本、音频等多种格式，单个文件最大 500MB</p>
<div class="flex items-center justify-center space-x-4">
<button id="selectFileBtn" class="bg-primary text-white px-4 py-2 rounded-button text-sm hover:bg-blue-600 !rounded-button">
选择文件
</button>
<button id="batchUploadBtn" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-button text-sm hover:bg-gray-50 !rounded-button">
批量上传
</button>
</div>
<input type="file" id="fileInput" class="hidden" multiple accept=".jpg,.jpeg,.png,.gif,.txt,.csv,.json,.mp3,.wav,.mp4">
</div>
<div id="uploadedFiles" class="mt-4 space-y-2 hidden">
<h4 class="text-sm font-medium text-gray-700 mb-2">已上传文件</h4>
<div class="space-y-2" id="fileList"></div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">图像增强</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-2 gap-3">
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="image" data-method="rotation">
<div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg mx-auto mb-2">
<i class="ri-rotate-lock-line text-blue-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">旋转</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="image" data-method="flip">
<div class="w-8 h-8 flex items-center justify-center bg-green-100 rounded-lg mx-auto mb-2">
<i class="ri-flip-horizontal-line text-green-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">翻转</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="image" data-method="brightness">
<div class="w-8 h-8 flex items-center justify-center bg-yellow-100 rounded-lg mx-auto mb-2">
<i class="ri-sun-line text-yellow-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">亮度调整</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="image" data-method="noise">
<div class="w-8 h-8 flex items-center justify-center bg-purple-100 rounded-lg mx-auto mb-2">
<i class="ri-contrast-2-line text-purple-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">噪声添加</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="image" data-method="crop">
<div class="w-8 h-8 flex items-center justify-center bg-red-100 rounded-lg mx-auto mb-2">
<i class="ri-crop-line text-red-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">随机裁剪</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="image" data-method="blur">
<div class="w-8 h-8 flex items-center justify-center bg-indigo-100 rounded-lg mx-auto mb-2">
<i class="ri-blur-off-line text-indigo-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">模糊处理</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">文本增强</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-2 gap-3">
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="text" data-method="synonym">
<div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg mx-auto mb-2">
<i class="ri-translate-2 text-blue-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">同义词替换</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="text" data-method="backtranslation">
<div class="w-8 h-8 flex items-center justify-center bg-green-100 rounded-lg mx-auto mb-2">
<i class="ri-exchange-line text-green-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">回译</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="text" data-method="paraphrase">
<div class="w-8 h-8 flex items-center justify-center bg-purple-100 rounded-lg mx-auto mb-2">
<i class="ri-text-wrap text-purple-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">句式变换</span>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-3 text-center" data-type="text" data-method="insertion">
<div class="w-8 h-8 flex items-center justify-center bg-orange-100 rounded-lg mx-auto mb-2">
<i class="ri-add-line text-orange-600"></i>
</div>
<span class="text-sm font-medium text-gray-900">词汇插入</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">数据扩充</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 gap-3">
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-4 flex items-center" data-type="augment" data-method="interpolation">
<div class="w-10 h-10 flex items-center justify-center bg-blue-100 rounded-lg mr-3">
<i class="ri-line-chart-line text-blue-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">数据插值</div>
<div class="text-xs text-gray-500">通过插值生成新样本</div>
</div>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-4 flex items-center" data-type="augment" data-method="gan">
<div class="w-10 h-10 flex items-center justify-center bg-purple-100 rounded-lg mr-3">
<i class="ri-brain-line text-purple-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">生成对抗网络</div>
<div class="text-xs text-gray-500">使用 GAN 生成新数据</div>
</div>
</div>
<div class="enhancement-option border-2 border-gray-200 rounded-lg p-4 flex items-center" data-type="augment" data-method="mixup">
<div class="w-10 h-10 flex items-center justify-center bg-green-100 rounded-lg mr-3">
<i class="ri-shuffle-line text-green-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">Mixup 增强</div>
<div class="text-xs text-gray-500">混合样本和标签</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">参数配置</h2>
</div>
<div class="p-6">
<div id="configPanel" class="space-y-4">
<div class="p-4 bg-gray-50 rounded-lg text-center">
<div class="w-12 h-12 flex items-center justify-center bg-gray-200 rounded-lg mx-auto mb-3">
<i class="ri-settings-3-line text-gray-400"></i>
</div>
<p class="text-sm text-gray-600">选择增强方法后配置参数</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900">实时预览</h2>
<div class="flex bg-gray-100 rounded-lg p-1">
<button id="previewOriginal" class="tab-button px-3 py-1 rounded text-sm font-medium active">原始</button>
<button id="previewEnhanced" class="tab-button px-3 py-1 rounded text-sm font-medium">增强后</button>
</div>
</div>
</div>
<div class="p-6">
<div id="previewArea" class="preview-container min-h-[300px] border-2 border-dashed border-gray-200 rounded-lg flex items-center justify-center">
<div class="text-center">
<div class="w-16 h-16 flex items-center justify-center bg-gray-100 rounded-lg mx-auto mb-4">
<i class="ri-eye-line text-gray-400 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">数据预览</h3>
<p class="text-sm text-gray-500">上传数据并选择增强方法后显示预览</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">增强进度</h2>
</div>
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">总体进度</span>
<span class="text-sm font-medium text-gray-900" id="progressPercentage">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div id="enhancementProgress" class="bg-primary h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<div class="space-y-2" id="methodProgress">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600">图像旋转</span>
<span class="text-gray-500">待开始</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600">亮度调整</span>
<span class="text-gray-500">待开始</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600">噪声添加</span>
<span class="text-gray-500">待开始</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">批量设置</h2>
</div>
<div class="p-6">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">增强倍数</label>
<input type="range" class="custom-range" min="1" max="10" value="3" id="augmentationMultiplier">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>1x</span>
<span id="multiplierValue">3x</span>
<span>10x</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">输出格式</label>
<div class="relative">
<select id="outputFormat" class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8">
<option>保持原格式</option>
<option>PNG</option>
<option>JPEG</option>
<option>JSON</option>
<option>CSV</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox mr-2" id="preserveOriginal" checked>
<span class="text-sm text-gray-700">保留原始文件</span>
</label>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox mr-2" id="randomSeed">
<span class="text-sm text-gray-700">使用随机种子</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">增强日志</h2>
</div>
<div class="p-6">
<div id="logArea" class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm h-48 overflow-y-auto">
<div class="text-gray-500">[系统] 数据增强系统已就绪</div>
<div class="text-gray-500">[系统] 等待数据上传...</div>
</div>
</div>
</div>
</div>
</div>
<div class="fixed bottom-0 left-64 right-0 bg-white border-t border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="text-sm text-gray-600">
已选择 <span id="selectedMethodCount">0</span> 种增强方法
</div>
<div class="text-sm text-gray-600">
预计生成 <span id="estimatedSamples">0</span> 个样本
</div>
</div>
<div class="flex items-center space-x-3">
<button id="resetConfigBtn" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-button text-sm hover:bg-gray-50 !rounded-button">
重置配置
</button>
<button id="exportEnhancedBtn" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-button text-sm hover:bg-gray-50 !rounded-button" disabled>
<i class="ri-download-line mr-2"></i>
导出结果
</button>
<button id="applyEnhancementBtn" class="bg-primary text-white px-6 py-2 rounded-button text-sm font-medium hover:bg-blue-600 !rounded-button" disabled>
<i class="ri-magic-line mr-2"></i>
应用增强
</button>
</div>
</div>
</div>
</div>
</div>
<script id="fileUpload">
document.addEventListener('DOMContentLoaded', function() {
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const selectFileBtn = document.getElementById('selectFileBtn');
const batchUploadBtn = document.getElementById('batchUploadBtn');
const uploadedFiles = document.getElementById('uploadedFiles');
const fileList = document.getElementById('fileList');
const logArea = document.getElementById('logArea');
let files = [];
function addLog(message, type = 'info') {
const timestamp = new Date().toLocaleTimeString();
const logEntry = document.createElement('div');
logEntry.className = type === 'error' ? 'text-red-400' : type === 'success' ? 'text-green-400' : 'text-gray-300';
logEntry.textContent = `[${timestamp}] ${message}`;
logArea.appendChild(logEntry);
logArea.scrollTop = logArea.scrollHeight;
}
function renderFileList() {
fileList.innerHTML = '';
files.forEach((file, index) => {
const fileItem = document.createElement('div');
fileItem.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-lg';
const fileIcon = file.type.startsWith('image/') ? 'ri-image-line' : 
file.type.startsWith('text/') ? 'ri-file-text-line' : 
file.type.startsWith('audio/') ? 'ri-music-line' : 'ri-file-line';
fileItem.innerHTML = `
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg mr-3">
<i class="${fileIcon} text-blue-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">${file.name}</div>
<div class="text-xs text-gray-500">${(file.size / 1024 / 1024).toFixed(2)} MB</div>
</div>
</div>
<button class="text-red-500 hover:text-red-700" onclick="removeFile(${index})">
<i class="ri-delete-bin-line"></i>
</button>
`;
fileList.appendChild(fileItem);
});
uploadedFiles.classList.toggle('hidden', files.length === 0);
}
window.removeFile = function(index) {
const fileName = files[index]?.name;
files.splice(index, 1);
renderFileList();
addLog(`已移除文件: ${fileName}`);
};
function handleFiles(selectedFiles) {
Array.from(selectedFiles).forEach(file => {
if (file.size > 500 * 1024 * 1024) {
addLog(`文件 ${file.name} 超过 500MB 限制`, 'error');
return;
}
files.push(file);
addLog(`已添加文件: ${file.name}`, 'success');
});
renderFileList();
}
uploadArea.addEventListener('dragover', function(e) {
e.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', function(e) {
e.preventDefault();
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', function(e) {
e.preventDefault();
uploadArea.classList.remove('dragover');
handleFiles(e.dataTransfer.files);
});
selectFileBtn.addEventListener('click', function() {
fileInput.click();
});
fileInput.addEventListener('change', function() {
handleFiles(this.files);
});
batchUploadBtn.addEventListener('click', function() {
fileInput.setAttribute('webkitdirectory', '');
fileInput.click();
});
});
</script>
<script id="enhancementMethods">
document.addEventListener('DOMContentLoaded', function() {
const enhancementOptions = document.querySelectorAll('.enhancement-option');
const configPanel = document.getElementById('configPanel');
const selectedMethodCount = document.getElementById('selectedMethodCount');
const estimatedSamples = document.getElementById('estimatedSamples');
const applyEnhancementBtn = document.getElementById('applyEnhancementBtn');
let selectedMethods = [];
const methodConfigs = {
rotation: {
title: '图像旋转配置',
params: [
{ label: '旋转角度范围', type: 'range', min: 0, max: 360, value: 30, unit: '度' },
{ label: '旋转步长', type: 'range', min: 5, max: 90, value: 15, unit: '度' },
{ label: '填充模式', type: 'select', options: ['边缘填充', '反射填充', '常数填充'], value: '边缘填充' }
]
},
flip: {
title: '图像翻转配置',
params: [
{ label: '水平翻转', type: 'checkbox', checked: true },
{ label: '垂直翻转', type: 'checkbox', checked: false },
{ label: '随机翻转概率', type: 'range', min: 0, max: 100, value: 50, unit: '%' }
]
},
brightness: {
title: '亮度调整配置',
params: [
{ label: '亮度变化范围', type: 'range', min: 0, max: 100, value: 20, unit: '%' },
{ label: '对比度调整', type: 'checkbox', checked: true },
{ label: '饱和度调整', type: 'checkbox', checked: false }
]
},
noise: {
title: '噪声添加配置',
params: [
{ label: '噪声类型', type: 'select', options: ['高斯噪声', '椒盐噪声', '泊松噪声'], value: '高斯噪声' },
{ label: '噪声强度', type: 'range', min: 0, max: 50, value: 10, unit: '%' },
{ label: '应用概率', type: 'range', min: 0, max: 100, value: 30, unit: '%' }
]
},
synonym: {
title: '同义词替换配置',
params: [
{ label: '替换比例', type: 'range', min: 0, max: 50, value: 15, unit: '%' },
{ label: '词性过滤', type: 'checkbox', checked: true },
{ label: '保持语义', type: 'checkbox', checked: true }
]
},
backtranslation: {
title: '回译配置',
params: [
{ label: '中间语言', type: 'select', options: ['英语', '法语', '德语', '日语'], value: '英语' },
{ label: '翻译质量', type: 'select', options: ['快速', '平衡', '高质量'], value: '平衡' }
]
},
paraphrase: {
title: '句式变换配置',
params: [
{ label: '变换强度', type: 'range', min: 0, max: 100, value: 40, unit: '%' },
{ label: '保持长度', type: 'checkbox', checked: false },
{ label: '语法检查', type: 'checkbox', checked: true }
]
},
interpolation: {
title: '数据插值配置',
params: [
{ label: '插值方法', type: 'select', options: ['线性插值', '样条插值', '贝塞尔插值'], value: '线性插值' },
{ label: '插值点数', type: 'range', min: 2, max: 20, value: 5, unit: '个' },
{ label: '平滑参数', type: 'range', min: 0, max: 100, value: 50, unit: '%' }
]
},
gan: {
title: 'GAN 生成配置',
params: [
{ label: '生成模型', type: 'select', options: ['DCGAN', 'StyleGAN', 'CycleGAN'], value: 'DCGAN' },
{ label: '生成数量', type: 'range', min: 10, max: 1000, value: 100, unit: '个' },
{ label: '质量阈值', type: 'range', min: 0, max: 100, value: 80, unit: '%' }
]
}
};
function updateCounts() {
selectedMethodCount.textContent = selectedMethods.length;
const multiplier = parseInt(document.getElementById('augmentationMultiplier')?.value || 3);
const baseFiles = window.files?.length || 0;
estimatedSamples.textContent = baseFiles * selectedMethods.length * multiplier;
applyEnhancementBtn.disabled = selectedMethods.length === 0 || baseFiles === 0;
}
function renderConfigPanel() {
if (selectedMethods.length === 0) {
configPanel.innerHTML = `
<div class="p-4 bg-gray-50 rounded-lg text-center">
<div class="w-12 h-12 flex items-center justify-center bg-gray-200 rounded-lg mx-auto mb-3">
<i class="ri-settings-3-line text-gray-400"></i>
</div>
<p class="text-sm text-gray-600">选择增强方法后配置参数</p>
</div>
`;
return;
}
configPanel.innerHTML = '';
selectedMethods.forEach(method => {
const config = methodConfigs[method];
if (!config) return;
const methodDiv = document.createElement('div');
methodDiv.className = 'p-4 border border-gray-200 rounded-lg mb-4';
methodDiv.innerHTML = `
<h4 class="text-md font-medium text-gray-900 mb-3">${config.title}</h4>
<div class="space-y-3">
${config.params.map((param, index) => {
if (param.type === 'checkbox') {
return `
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox mr-2" ${param.checked ? 'checked' : ''}>
<span class="text-sm text-gray-700">${param.label}</span>
</label>
`;
} else if (param.type === 'select') {
return `
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">${param.label}</label>
<div class="relative">
<select class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8">
${param.options.map(opt => `<option ${opt === param.value ? 'selected' : ''}>${opt}</option>`).join('')}
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
</div>
`;
} else if (param.type === 'range') {
return `
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">${param.label}</label>
<input type="range" class="custom-range" min="${param.min}" max="${param.max}" value="${param.value}">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>${param.min}${param.unit || ''}</span>
<span>${param.value}${param.unit || ''}</span>
<span>${param.max}${param.unit || ''}</span>
</div>
</div>
`;
}
}).join('')}
</div>
`;
configPanel.appendChild(methodDiv);
});
}
enhancementOptions.forEach(option => {
option.addEventListener('click', function() {
const method = this.dataset.method;
if (selectedMethods.includes(method)) {
selectedMethods = selectedMethods.filter(m => m !== method);
this.classList.remove('selected');
} else {
selectedMethods.push(method);
this.classList.add('selected');
}
renderConfigPanel();
updateCounts();
});
});
document.getElementById('augmentationMultiplier')?.addEventListener('input', function() {
document.getElementById('multiplierValue').textContent = this.value + 'x';
updateCounts();
});
});
</script>
<script id="previewControl">
document.addEventListener('DOMContentLoaded', function() {
const previewOriginal = document.getElementById('previewOriginal');
const previewEnhanced = document.getElementById('previewEnhanced');
const previewArea = document.getElementById('previewArea');
let currentPreviewMode = 'original';
function switchPreview(mode) {
currentPreviewMode = mode;
previewOriginal.classList.toggle('active', mode === 'original');
previewEnhanced.classList.toggle('active', mode === 'enhanced');
if (window.files && window.files.length > 0) {
updatePreview();
}
}
function updatePreview() {
if (!window.files || window.files.length === 0) return;
const file = window.files[0];
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
previewArea.innerHTML = `
<div class="w-full h-full flex items-center justify-center">
<img src="${e.target.result}" alt="预览图片" class="max-w-full max-h-full object-contain rounded-lg">
</div>
`;
};
reader.readAsDataURL(file);
} else if (file.type.startsWith('text/')) {
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result.substring(0, 500);
previewArea.innerHTML = `
<div class="w-full h-full p-4 bg-gray-50 rounded-lg overflow-auto">
<pre class="text-sm text-gray-700 whitespace-pre-wrap">${content}${e.target.result.length > 500 ? '...' : ''}</pre>
</div>
`;
};
reader.readAsText(file);
} else {
previewArea.innerHTML = `
<div class="text-center">
<div class="w-16 h-16 flex items-center justify-center bg-blue-100 rounded-lg mx-auto mb-4">
<i class="ri-file-line text-blue-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">${file.name}</h3>
<p class="text-sm text-gray-500">文件类型: ${file.type || '未知'}</p>
<p class="text-sm text-gray-500">文件大小: ${(file.size / 1024 / 1024).toFixed(2)} MB</p>
</div>
`;
}
}
previewOriginal.addEventListener('click', () => switchPreview('original'));
previewEnhanced.addEventListener('click', () => switchPreview('enhanced'));
});
</script>
<script id="enhancementProcess">
document.addEventListener('DOMContentLoaded', function() {
const startEnhancementBtn = document.getElementById('startEnhancementBtn');
const applyEnhancementBtn = document.getElementById('applyEnhancementBtn');
const resetConfigBtn = document.getElementById('resetConfigBtn');
const exportEnhancedBtn = document.getElementById('exportEnhancedBtn');
const enhancementProgress = document.getElementById('enhancementProgress');
const progressPercentage = document.getElementById('progressPercentage');
const logArea = document.getElementById('logArea');
function addLog(message, type = 'info') {
const timestamp = new Date().toLocaleTimeString();
const logEntry = document.createElement('div');
logEntry.className = type === 'error' ? 'text-red-400' : type === 'success' ? 'text-green-400' : 'text-gray-300';
logEntry.textContent = `[${timestamp}] ${message}`;
logArea.appendChild(logEntry);
logArea.scrollTop = logArea.scrollHeight;
}
function simulateEnhancement() {
let progress = 0;
addLog('开始数据增强处理...', 'success');
const interval = setInterval(() => {
progress += Math.random() * 15;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
addLog('数据增强处理完成', 'success');
exportEnhancedBtn.disabled = false;
}
enhancementProgress.style.width = progress + '%';
progressPercentage.textContent = Math.round(progress) + '%';
}, 800);
}
startEnhancementBtn.addEventListener('click', function() {
if (!window.files || window.files.length === 0) {
addLog('请先上传数据文件', 'error');
return;
}
simulateEnhancement();
});
applyEnhancementBtn.addEventListener('click', function() {
simulateEnhancement();
});
resetConfigBtn.addEventListener('click', function() {
if (confirm('确定要重置所有配置吗？')) {
document.querySelectorAll('.enhancement-option').forEach(option => {
option.classList.remove('selected');
});
window.selectedMethods = [];
document.getElementById('configPanel').innerHTML = `
<div class="p-4 bg-gray-50 rounded-lg text-center">
<div class="w-12 h-12 flex items-center justify-center bg-gray-200 rounded-lg mx-auto mb-3">
<i class="ri-settings-3-line text-gray-400"></i>
</div>
<p class="text-sm text-gray-600">选择增强方法后配置参数</p>
</div>
`;
document.getElementById('selectedMethodCount').textContent = '0';
document.getElementById('estimatedSamples').textContent = '0';
addLog('配置已重置');
}
});
exportEnhancedBtn.addEventListener('click', function() {
addLog('正在导出增强结果...', 'success');
setTimeout(() => {
addLog('增强结果导出完成', 'success');
}, 1500);
});
});
</script>
</body>
</html>